<template>
  <div class="app-main">
    <div class="contenBox box">
      <el-form :model="from" :rules="Fromrules" ref="From">

         <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="库区编号" prop="code">
              <el-input v-model="from.code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属库区" >
           <el-select
                v-model="from.warehouseId"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in Kq"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="库区名称" prop="name">
              <el-input v-model="from.name"></el-input>
            </el-form-item>
          </el-col>
            <el-col :span="6">
            <el-form-item label="温度类型" prop="temperatureType">
               <el-select
                v-model="from.temperatureType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in temper"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="承重类型" prop="bearingType">
              <el-select
                v-model="from.bearingType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in bearingType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用途属性" prop="useType">
             <el-select
                v-model="from.useType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in useType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="负责人" prop="personName">
              <el-input v-model="from.personName"></el-input>
            </el-form-item>
          </el-col>
            <el-col :span="6">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="from.phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="库区状态" prop="status">
         <el-radio-group v-model="from.status" >
    <el-radio :label="3">备选项</el-radio>
    <el-radio :label="6">备选项</el-radio>

  </el-radio-group>
        </el-form-item>
 <el-divider></el-divider>
         <div class="button">
          <button class="fanhui">返回</button>
          <button class="submit" @click="submit">提交</button>
        </div>
      </el-form>

    </div>
<p>{{$route.params.id }}</p>
  </div>
</template>

<script>
import { addKq, myKq, searchId, editKq } from '@/api/area'
export default {
  data () {
    return {
      bearingType: [
        {
          value: 'ZX',
          label: '重型'
        },
        {
          value: 'QX',
          label: '轻型'
        }

      ],
      temper: [
        {
          value: 'CW',
          label: ' 常温'
        },
        {
          value: 'LC',
          label: '冷藏'
        },
        {
          value: 'HW',
          label: '恒温'
        }

      ],

      Kq: [],
      useType: [
        {
          value: 'RKHCQ',
          label: ' 入库缓存区'
        },
        {
          value: 'CKHCQ ',
          label: '出库缓存区'
        },
        {
          value: 'CCQ ',
          label: '存储区'
        }, {
          value: 'FJQ  ',
          label: '分拣区'
        }, {
          value: 'ZJQ ',
          label: '质检区'
        }

      ],
      from: {
        bearingType: '',
        code: '',
        name: '',
        personName: '',
        phone: '',
        status: '',
        temperatureType: '',
        useType: '',
        warehouseId: ''

      },
      Fromrules: {
        bearingType: [{ required: true, message: '不能为空' }],
        code: [{ required: true, message: '不能为空' }],
        name: [{ required: true, message: '不能为空' }],
        personName: [{ required: true, message: '不能为空' }],
        phone: [
          { required: true, message: '不能为空' },
          {
            pattern:
              /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/,
            message: '手机号码格式不对，请重新输入',
            trigger: 'blur'
          }
        ],
        temperatureType: [{ required: true, message: '不能为空' }],
        warehouseId: [{ required: true, message: '不能为空' }],
        useType: [{ required: true, message: '不能为空' }],
        status: [{ required: true, message: '不能为空' }]
      }
    }
  },
  async created () {
    const { data } = await myKq({
      status: 1
    })
    this.Kq = data
    if (this.$route.params.id !== 'null') {
      const { data } = await searchId(this.$route.params.id)
      this.from = data
    }
  },
  methods: {
    async  submit () {
      this.$refs.From.validate(async valid => {
        if (valid) {
          if (this.$route.params.id === 'null') {
            await addKq(this.from)
            this.$message.success('添加成功')
          } else {
            await editKq(this.from)
            this.$message.success('编辑成功')
          }
          this.$router.push('/area')
        } else {
          this.$message.warning('请填写完整')
        }
      })
    }
  }
}

</script>

<style lang="less" scoped>
.button {
  text-align: center;
}
.button :hover{
  background-color: #ffb200;
}
.submit {
  background: #ffb200;
  color: #332929;
  height: 40px;
  border-radius: 20px;
  border: 0;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  line-height: 40px;
  padding-left: 26px;
  padding-right: 26px;
  cursor: pointer;
  outline: 0;
  width: 170px;
  margin: 0 15px;
}
.fanhui {
  background: #f8f5f5;
  color: #332929;
  height: 40px;
  border-radius: 20px;
  border: 0;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  line-height: 40px;
  padding-left: 26px;
  padding-right: 26px;
  cursor: pointer;
  outline: 0;
  width: 170px;
  margin: 0 15px;
}
.app-main {
  min-height: calc(100vh - 50px);
  background-color: #fdfafa;
  width: 100%;
  position: relative;
  overflow: hidden;
  .contenBox {
    margin-top: 20px;
    margin-left: 29px;
    margin-right: 29px;
    padding: 30px;
  }
  .box {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  }
}
/deep/.el-row {
  position: relative;
  box-sizing: border-box;
}
/deep/ .el-col-6 {
  width: 25%;
}
/deep/.el-form-item {
  margin-bottom: 30px;
}
.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 100%;
}
/deep/.el-input .el-input__inner {
  background: #f8F5F5;
  border-color: #f8F5F5;
  color: #b5abab;
}
/deep/.el-input .el-input__inner:focus{
  border: 1px solid yellowgreen;
}
/deep/.el-input .el-input__inner:hover{
  border: 1px solid black;
}

.el-radio-group {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    font-size: 0;
    width: 100%;
}
</style>
